<template>
    <div class="search">
        <el-autocomplete :trigger-on-focus="false" v-model="state1" :fetch-suggestions="querySearch" clearable
            placeholder="请输入关键字" @select="handleSelect" />
        <el-button type="primary">Search</el-button>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from 'vue-router'
import { reqHospitalInfo } from "@/api/home/index"
import type { Hospital } from '@/api/home/type'
let state1 = ref('')
let $router = useRouter()
// 自动选项框model
interface LinkItem {
    value: string,
    hoscode: string
}

// 下拉列表需要返回对象数组
const querySearch = async (queryString: string, cb: any) => {
    let res = await getHospitalInfo(queryString);
    // 需要接收一个指定个数的对象数组，具体格式见el官网，
    //其中map函数类似于csharp中的投影 
    cb(res.map(val => {
        return {
            value: val.hosname,
            hoscode: val.hoscode,
        };
    }))
}
const getHospitalInfo = async (name: string): Promise<Hospital[]> => {
    let result = await reqHospitalInfo(name)
    if (result.code == 200) {
        return result.data;
    }
    else {
        return Array<Hospital>()
    }
}
//选中后路由需要跳转到医院的详情界面
function handleSelect(item: LinkItem) {
    console.log(item);
    $router.push({ path: '/hospital/register', query: { hoscode: item.hoscode } })
}
</script>

<style scoped lang="scss">
.search {
    width: 1200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    // 深度作用选择器

    :deep(.el-input__wrapper) {
        width: 500px
    }

    .el-button {
        margin-left: 10px;
    }
}
</style>